<template>
	<view class="login">
		<view class="login-box"></view>
		 <view class="login-box2">
		 	<p>{{flag?'登录':'注册'}}</p>
			<u--input
			        class='user-inp'
				    placeholder="请输入用户名"
				    prefixIcon="account"
					v-model="from.username"
				    prefixIconStyle="font-size: 22px;color: #909399"
				></u--input>
				<u--input
				        class='psd-inp'
					    placeholder="请输入密码"
					    prefixIcon="lock"
					    prefixIconStyle="font-size: 22px;color: #909399"
						v-model="from.password"
					></u--input>
					<u--input
					v-show="!flag"
					        class='psd-inp1'
						    placeholder="请再次输入密码"
						    prefixIcon="lock"
						    prefixIconStyle="font-size: 22px;color: #909399"
							v-model="from.password1"
						></u--input>
					<u-button type="success"  class='btn' @click="login()">{{flag?'登录':'注册'}}</u-button>
					<view class="foo">
						<view class="zc" @click="zc">{{flag?'注册账号' : '去登录'}}</view>
						<view class="psd">忘记密码?</view>
					</view>
					<view class="chcke" v-show="flag">
					  <u-checkbox-group
					           
					            placement="column"
					           
					        >
					            <u-checkbox 
					                @change="checkboxChange"
					            >
					            </u-checkbox>
					        </u-checkbox-group>已阅读并同意用户协议&隐私声明
					</view>
		 </view>
	</view>
</template>

<script>
	import {getlogin} from '@/utils/api.js'
  export default{
	  data(){
		  return{
			from:{
				username:'',
				password:''
			},
			flag:true,
			check:false
		  }
	  },
	  
	  onLoad(){
	  },
	  methods:{
		// 点击登录 
		 async login(){
			// console.log(this.from);
			// console.log(8888,res);
			if(this.check==false){
				uni.showToast({
					title:'请已阅读并同意用户协议&隐私声明'
				})
			}else{
					var res = await getlogin (this.from)
					console.log(555,res);
					if(res.code == 20000){
						 uni.showToast({
						 	title:'登录成功'
						 })
						 uni.switchTab({
						 	url:'../my/my'
						 })
						 uni.setStorageSync('token' ,res.data.token)
						 uni.setStorageSync('username',res.data.username)
					}
					
			}
			if(this.from.username == '' || this.from.password == ''){
				uni.showToast({
					title:'内容不能为空'
				})
				return false
			}
		  },
		  // 注册账号：去登录 那块
		  zc(){
			  this.flag = !this.flag  
		  },
		  // 复选框那块
		  checkboxChange(e){
			  console.log(e);
			  this.check = e
		  },
		  // 点击注册按钮注册
		  registe(){
			  
		  }
	  }
  }	
</script>

<style lang="less">
	.login{
		.login-box{
			width: 100%;
			height: 240rpx;
			background: linear-gradient( to right,#3bfdaf,#70d6f2);
		}
		.login-box2{
			width: 100%;
		    height: 900rpx;
			box-sizing: border-box;
			background-color:white;
			padding: 60rpx 0;
			border-radius: 40rpx 40rpx 0 0;
			margin-top: -30rpx;
			p{
				padding-left: 50rpx;
				font-size: 35rpx;
			}
		 .user-inp{
			width: 530rpx;
			height: 60rpx;
			margin-left: 100rpx;
			margin-top: 30rpx;
			background-color: #f5f5f5;
			opacity: 0.5;
		}
		.psd-inp{
			width: 530rpx;
			height: 60rpx;
			margin-left: 100rpx;
			margin-top: 30rpx;
			background-color: #f5f5f5;
			opacity: 0.5;
		}
		.psd-inp1{
			width: 530rpx;
			height: 60rpx;
			margin-left: 100rpx;
			margin-top: 30rpx;
			background-color: #f5f5f5;
			opacity: 0.5;
		}
		.btn{
			width: 540rpx;
			margin-top: 40rpx;
			background-color: #5ccc84;
		}
		
		.foo{
			width: 100%;
			height: 120rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			.zc{
				flex: 6;
				line-height: 120rpx;
			    padding-left: 50rpx;
				font-size: 30rpx;
				color: #5ccc84;
			}
			.psd{
				flex: 4;
				line-height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				color: #ccc;
			}
		}
		.chcke{
			margin-left: 130rpx;
			font-size: 30rpx;
			margin-top: 20rpx;
			color: #ccc;
		}
		}
		
	}
</style>